/**
 * 功能：事件
 * 日期：2020/5/11
 **/

Vue.config.silent = true;
Vue.config.productionTip = true;

const app1 = new Vue({
	el: '#app-1',
	methods: {
        popupBoxMsg() {
            alert('事件被执行');
        },
        showMsg(msg) {
            alert('您好，' + msg + '!');
        }
    }
});

const app2 = new Vue({
    el: '#app-2',
    data: {
        userName: '',
        progLang: ['HTML5','Java','Python','PHP','C#']
    },
	methods: {
        /**
         * 向用户打招呼
         * @param { String } user 用户名
         */
        helloUser(user) {
            alert('您好，' + user + '!');
        },
        /**
         * 显示编程语言的序号及名称
         * @param { String } lang 语言名称
         * @param { Number } index 索引值
         */
        showProgLang(lang,index) {
            alert((index + 1) + '. ' + lang);
        }
    }
});

const app3 = new Vue({
    el: '#app-3',
    data: {
        eleStyle: {
            padding: '10px',
            backgroundColor: '#6c4c1d',
            color: '#fefefe'
        },
        showState: true
    }
});

const app4 = new Vue({
    el: '#app-4',
    methods: {
        /**
         * 显示当前按钮的名称
         * @param { Object } e 事件对象
         */
        showButtonName(e) {
            console.log(e);
            alert('您点击的是“' + e.target.textContent + '”');
        }
    }
});

const app5 = new Vue({
    el: '#app-5',
    methods: {
        gotoWebSite(e) {
            open('https://www.aulence.com', '_blank');
        }
    }
});

const app6 = new Vue({
    el: '#app-6',
    data: {
        inputContent: '',
        contentList: []
    },
    methods: {
        createList() {
            if(this.inputContent) {
                this.contentList.push(this.inputContent);
                this.inputContent = '';
            }
        }
    }
});



